<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>企业注册</title>
    <link rel="icon" href="/image/favicon.ico" type="image/x-icon"/>
    <script src="/vue.min.js"></script>
    <script src="/axios.min.js"></script>
    <script src="/caddress.js"></script>
    <style>
        .register {
            border: rgb(255, 255, 255) solid 1px;
            height: 1000px;
            background-image: url('/image/登录页面背景.png');
            background-size: 100% 100%;
        }

        .register-page {
            opacity: 0.85;
            width: 500px;
            height: 600px;
            border: white soild 1px;
            background-color: rgb(247, 243, 243);
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .user {
            margin-top: 6%;

        }

        .user label {
            margin-left: 8%;

        }

        .user input {
            position: absolute;
            width: 55%;
            height: 25px;
            background-color: white;
            border: rgb(233, 230, 230);
            left: 120px;
        }

        .user select {
            position: absolute;
            width: 20%;
            height: 25px;
            left: 120px;
            background-color: white;
            border: rgb(233, 230, 230);
        }

        #bt {

            display: flex;
            margin-left: 50px;
            width: 150px;
            height: 50px;
            background-color: white;
            /* 设置背景颜色 */
            color: rgb(17, 174, 168);
            /* 设置文字颜色 */
            font-size: 16px;
            border: 1px;
            /* 移除边框 */
            cursor: pointer;
            /* 将鼠标样式改为指针样式 */
            transition: all 0.3s ease;
            /* 添加过渡效果 */
        }

        #bt:hover {
            background-color: #aababa;
            /* 鼠标悬停时的背景颜色变化 */
        }

        .had {
            margin-top: 100px;
            margin-left: 310px;
        }
    </style>


</head>

<body>
    <div id="app">
        <div class="register">
            <div class="register-page">
                <h2 align="center">企业注册</h2>
                <form @submit.prevent="submitForm">

                    <div class="user">
                        <label>用户名</label>
                        <input type="text" v-model="cusername" placeholder="请输入用户名"></input>
                        <p v-if="cusernameError" style="color: red; text-align: center; margin-top: 5px;">
                            {{cusernameError }}</p>
                    </div>

                    <div class="user">
                        <label>密码</label>
                        <input type="password" v-model="cpassword" placeholder="请输入密码"></input>
                        <p v-if="cpasswordError" style="color: red; text-align: center; margin-top: 5px;">
                            {{cpasswordError }}</p>
                    </div>

                    <div class="user">
                        <label>确认密码</label>
                        <input type="password" v-model="cpassword1" placeholder="请确认密码"></input>
                    </div>

                    <div class="user">
                        <label>公司名</label>
                        <input type="text" v-model="cname" placeholder="请输入公司名"></input>
                        <p v-if="cnameError" style="color: red; text-align: center; margin-top: 5px;">
                            {{cnameError }}</p>
                    </div>

                    <div class="user">
                        <label>公司电话</label>
                        <input type="text" v-model="cphone" placeholder="请输入公司电话"></input>
                        <p v-if="cphoneError" style="color: red; text-align: center; margin-top: 5px;">
                            {{cphoneError }}</p>
                    </div>

                    <div class="user">
                        <label>公司地点</label>
                        <input type="text" v-model="caddres" placeholder="请输入公司地点"></input>
                        <p v-if="caddresError" style="color: red; text-align: center; margin-top: 5px;">
                            {{caddresError }}</p>

                    </div>

                    <div class="user">
                        <label>公司邮箱</label>
                        <input type="text" v-model="cemail" placeholder="请输入公司邮箱"></input>
                        <p v-if="cemailError" style="color: red; text-align: center; margin-top: 5px;">
                            {{cemailError }}</p>

                    </div>

                    <div class="user">
                        <label>建立年份</label>
                        <input type="text" v-model="cyear" placeholder="请输入建立年份"></input>
                        <p v-if="cyearError" style="color: red; text-align: center; margin-top: 5px;">
                            {{cyearError }}</p>

                    </div>
                    <div class="user">
                        <input type="submit" value="立即注册" id="bt"></input>
                    </div>



                </form>
                <div class="had">
                    <ul>
                        <a href="用户登录.html">已有账号 点击登录</a>
                    </ul>
                </div>

            </div>

        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                cusername: '',
                cusernameError: '',
                cpassword: '',
                cpasswordError: '',
                cpassword1: '',
                cname: '',
                cnameError: '',
                cphone: '',
                cphoneError: '',
                caddres: '',
                caddresError: '',
                cemail: '',
                cemailError: '',
                cyear: '',
                cyearError: ''

            },

            methods: {

                checkUsername(cusername) {
                    // 用户名至少6-10个字符,全为数字
                    const regex = /^\d{6,10}$/;
                    return regex.test(cusername);
                },


                checkPassword(cpassword) {
                    // 密码至少6-10个字符
                    const regex = /^[a-zA-Z\d]{6,10}$/;
                    return regex.test(cpassword);
                },

                checkName(cname) {
                    // 公司名不为空
                    const regex = /^(?!\s*$)[A-Za-z0-9._\-\(\)\u4e00-\u9fa5\（）\s-]+$/;
                    return regex.test(cname);
                },

                checkPhone(cphone) {
                    // 电话只能是11位数字
                    const regex = /^\d{11}$/;
                    return regex.test(cphone);
                },

                checkAddress(caddres) {
                    // 公司地点只能为2到10个汉字
                    const regex = /^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10}){0,2}$/;
                    return regex.test(caddres);
                },

                checkEmail(cemail) {
                    // 公司邮箱只允许英文字母、数字、下划线、英文句号、以及中划线组成
                    const regex = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                    return regex.test(cemail);
                },

                checkYear(cyear) {
                    // 公司年份只允许由四位数字组成
                    const regex = /^\d{4}$/;
                    return regex.test(cyear);
                },

                submitForm() {
                    this.cusernameError = '';
                    this.cpasswordError = '';
                    this.cnameError = '';
                    this.cphoneError = '';
                    this.caddresError = '';
                    this.cemailError = '';
                    this.cyearError = '';


                    if (!this.checkUsername(this.cusername)) {
                        this.cusernameError = '用户名不符合要求';

                    }

                    if (!this.checkPassword(this.cpassword)) {
                        this.cpasswordError = '密码不符合要求';
                    }

                    if (!this.checkName(this.cname)) {
                        this.cnameError = '公司名不符合要求';
                    }

                    if (!this.checkPhone(this.cphone)) {
                        this.cphoneError = '公司电话不符合要求';
                    }

                    if (!this.checkAddress(this.caddres)) {
                        this.caddresError = '公司地点不符合要求';
                    }

                    if (!this.checkEmail(this.cemail)) {
                        this.cemailError = '公司邮箱不符合要求';
                    }

                    if (!this.checkYear(this.cyear)) {
                        this.cyearError = '建立年份不符合要求';
                        return;
                    }


                    if (this.cpassword1 !== this.cpassword) {
                        alert('请确保密码输入一致');
                        return;
                    }
                    // 检查所有错误信息是否为空
                    const errors = [this.cusernameError, this.cpasswordError, this.cnameError, this.cphoneError, this.caddresError, this.cemailError, this.cyearError];
                    const hasErrors = errors.some(error => error);

                    if (hasErrors) {
                        // 如果存在错误，则不继续提交表单
                        return;
                    }

                    let data = new FormData();
                    data.append("cusername", this.cusername);
                    data.append("cpassword", this.cpassword);
                    data.append("cname", this.cname);
                    data.append("cphone", this.cphone);
                    data.append("caddress", this.caddres);
                    data.append("cemail", this.cemail);
                    data.append("cyear", this.cyear);
                    axios.post('http://localhost:8080/hqdx/company/register', data)
                        .then(response => {
                            console.log(response.data);
                            alert("注册成功")
                        })
                        .catch(error => {
                            console.log(error);
                        });


                }


            }

        })
    </script>
</body>

</html>